<template>
  <el-dialog width="40%" :title="title" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
      label-width="140px">
      <el-row>
        <el-col :span="20">
          <el-form-item label="商品类型" prop="name">
            <el-input v-model="dataForm.name" placeholder="请输入商品类型名称"></el-input>
          </el-form-item>
        </el-col>
        
      </el-row>
      <el-row>
        
        <el-col :span="12">
          <el-form-item label="类型状态" prop="status">
            <el-radio-group v-model="dataForm.status">
              <el-radio :label="0">禁用</el-radio>
              <el-radio :label="1">使用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否推荐" prop="recommend">
            <el-radio-group v-model="dataForm.recommend">
              <el-radio :label="0">不推荐</el-radio>
              <el-radio :label="1">推荐</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品类型图片" prop="imgList">
            <image-upload ref="imgList" :type="'image'"
              :imageLimitSize="4"
              :imageSize="1"
              :imgageList="imgList" @updateImg="changeImg('1',$event)" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <!-- <el-button type="primary" @click="visible = false">确定</el-button> -->
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    add,update
  } from "@/api/business/goods/type";
  export default {
    dicts: ['order_status'],
    data() {
      return {
        title: '',
        visible: false,
        couponArr: [{
          code: 0,
          name: '否'
        }, {
          code: 1,
          name: '是'
        }],
        goodsList:[],
        imgList:[],
        dataForm: {
          name:'',
          status:0,
          recommend:0,
          goodsList:[]
        },
        imageApi:process.env.VUE_APP_IMAGE_BASE_URL,
        dataRule: {
          name: [{
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }],
          picturePath: [{
            required: true,
            message: '请上传类型图片',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      changeImg(val, e) {
        this.imgList = e
      },
      init(record) {
        this.visible = true
        this.dataForm = record
        this.title = '商品类型' + '修改'
        if(this.dataForm.picturePath){
            this.$nextTick(() => {
              this.imgList=[{
                    uid: this.dataForm.id,
                    id: this.dataForm.id,
                    status: "success",
                    filePath: this.dataForm.picturePath,
                    name: this.dataForm.picturePath,
                    url: this.imageApi + this.dataForm.picturePath
                  }];
              this.$refs.imgList.init(this.imgList)
            })
          }
      },
      onAdd(e) {
        console.log('add',e)
        this.visible = true
        this.dataForm = {}
        this.dataForm.level = e.level+1;
        this.dataForm.parentId = e.id;
        console.log(this.dataForm)
        
        this.title = '商品类型' + "新增"
        this.dataForm.status = 1;
        this.$nextTick(() => {
              this.imgList=[];
              this.$refs.imgList.init(this.imgList)
            })
        
      },

      // 表单提交
      dataFormSubmit() {
        if(!this.imgList[0].filePath){
          this.$message.error('请上传类型图片');
          return false;
        }
        this.dataForm.picturePath = this.imgList[0].filePath;
        
        
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if(this.title.indexOf('新增') !== -1){
              add(this.dataForm).then(res => {
                this.visible = false
                this.$modal.msgSuccess(this.title + "成功");
                this.$emit('refreshDataList')
              })
            }else{
              update(this.dataForm).then(res => {
                this.visible = false
                this.$modal.msgSuccess(this.title + "成功");
                this.$emit('refreshDataList')
              })
            }
            
          }
        })
      }
    }
  }
</script>
